<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nightscout BG NOW</title>
  <link href="/images/round1.png" rel="icon" id="favicon" type="image/png" />
  <link rel='stylesheet' type='text/css' href='/css/main.css' />
  <style type="text/css">
    img#arrow { height: 15vmin; }
    .center {
      text-align: center;
      padding: 0;
      margin: 0;
    }
    h1 {
      padding: 0;
      margin: 0;
      font-size: 1500%;
    }
    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    html {
    }
    body {
      font-size: 100%;
      min-height: 100%;

    }

    .stale {
      text-decoration: line-through;

    }
  </style>
</head>
<body>
  <div class="center">
    <h1 class="bgnow"></h1>
    <h1 class="clock"></h1>
  </div>
  <script src="/api/v1/status.js"></script>
  <script src="/js/bundle.js?v=<%= locals.cachebuster %>"></script>
  <script type="text/javascript">
    function query ( ) {
      console.log('query');
      $.ajax('/api/v1/entries/current.json', { success: render });
    }

    function render (xhr) {
      console.log('xhr', xhr);
      var rec = xhr[0];
      var last = new Date(rec.date);
      var now = new Date( );
      if (window.serverSettings.settings.units == 'mmol') {
        rec.sgv = Nightscout.units.mgdlToMMOL(rec.sgv);
      }
      $('.bgnow').html(rec.sgv + '<img id="arrow" src="">');
      $('#arrow').attr('src', 'images/'+rec.direction+'.svg');
      var threshold = 1000 * 60 * 13;
      $('.bgnow').toggleClass('stale', (now - last > threshold));
      
      var timeDivisor = (window.serverSettings.settings.timeFormat) ? window.serverSettings.settings.timeFormat : 12;
      
      var today = new Date(),
            h = today.getHours() % timeDivisor || timeDivisor,
            m = today.getMinutes();
      if (m < 10) m = "0" + m;
      $('.clock').text(h + ":" + m);
    }

    function init ( ) {
      console.log('init');
      query( );
      setInterval(query, 1 * 60 * 1000);
    }

    init( );
  </script>
</body>
</html>
